<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>未来之窗昭和仙君cyberwin_fairyalliance_webquery</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .section-title {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            margin-top: 30px;
        }
        .sub-title {
            color: #3498db;
            margin-top: 20px;
        }
        .overflow-x-auto {
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px 15px;
            text-align: left;
        }
        th {
            background-color: #f8f9fa;
            font-weight: bold;
            width: 20%;
        }
        td:nth-child(2) {
            width: 30%;
        }
        td:nth-child(3) {
            width: 50%;
        }
        code {
            background-color: #f8f9fa;
            padding: 2px 5px;
            border-radius: 3px;
            font-family: "Consolas", monospace;
        }
        .icon {
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <h1>未来之窗昭和仙君cyberwin_fairyalliance_webquery</h1>

    <!-- 模板渲染配置 -->
    <section id="render-config">
        <h2 class="section-title">
            <span class="icon">⚙️</span>模板渲染配置
        </h2>
        
        <div class="overflow-x-auto mb-6">
            <table>
                <thead>
                    <tr>
                        <th>方法</th>
                        <th>功能</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>$cq.渲染配置(options)</code></td>
                        <td>修改模板渲染引擎的全局配置，主要用于自定义模板分隔符</td>
                        <td>
                            <p>默认分隔符为 <code>{cwpdapp{</code> 和 <code>}}</code></p>
                            <p>修改为双大括号：<br>
                            <code>$cq.渲染配置({ open: "{{", close: "}}" })</code></p>
                            <p>修改为其他符号：<br>
                            <code>$cq.渲染配置({ open: "[[", close: "]]" })</code></p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <!-- 模板渲染方法 -->
    <section id="render-methods">
        <h2 class="section-title">
            <span class="icon">🔧</span>模板渲染方法
        </h2>
        
        <div class="overflow-x-auto mb-6">
            <table>
                <thead>
                    <tr>
                        <th>方法</th>
                        <th>功能</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>$cq.CyberWin_ClientRender(tpl)</code></td>
                        <td>通过模板字符串创建渲染器实例，返回包含render方法的对象</td>
                        <td>
                            <p>创建渲染器：<br>
                            <code>var renderer = $cq.CyberWin_ClientRender('&lt;div&gt;{cwpdapp{=d.name}}&lt;/div&gt;');</code></p>
                            <p>执行渲染：<br>
                            <code>var html = renderer.render({ name: "测试名称" });</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>render(data, [callback])</code></td>
                        <td>渲染器实例方法，将数据与模板结合生成HTML；有回调时执行回调，无回调时返回HTML</td>
                        <td>
                            <p>回调方式：<br>
                            <code>renderer.render(data, function(html) {<br>
                            &nbsp;&nbsp;$cq("#container").html(html);<br>
                            });</code></p>
                            <p>直接返回：<br>
                            <code>var html = renderer.render(data);<br>
                            $cq("#container").html(html);</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>$cq(selector).CyberWin_ClientRender(data, [callback])</code></td>
                        <td>通过选择器获取DOM元素作为模板，直接结合数据渲染</td>
                        <td>
                            <p>HTML模板：<br>
                            <code>&lt;script id="tpl" type="text/template"&gt;<br>
                            &nbsp;&nbsp;&lt;h3&gt;{cwpdapp{=d.title}}&lt;/h3&gt;<br>
                            &lt;/script&gt;</code></p>
                            <p>渲染调用：<br>
                            <code>$cq("#tpl").CyberWin_ClientRender({ title: "标题内容" }, function(html) {<br>
                            &nbsp;&nbsp;$cq("#result").html(html);<br>
                            });</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>$cq.未来之窗_通用技术_模板渲染(tpl)</code><br><code>$cq(selector).未来之窗_通用技术_模板渲染(data, [callback])</code></td>
                        <td>中文命名的渲染方法，功能与CyberWin_ClientRender完全一致</td>
                        <td>
                            <p>字符串模板：<br>
                            <code>$cq.未来之窗_通用技术_模板渲染(tpl).render(data);</code></p>
                            <p>DOM模板：<br>
                            <code>$cq("#tpl").未来之窗_通用技术_模板渲染(data, callback);</code></p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <!-- 模板语法 -->
    <section id="template-syntax">
        <h2 class="section-title">
            <span class="icon">📝</span>模板语法
        </h2>
        
        <div class="overflow-x-auto mb-6">
            <table>
                <thead>
                    <tr>
                        <th>语法</th>
                        <th>功能</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>{cwpdapp{# ... }}</code></td>
                        <td>包裹JavaScript逻辑代码（循环、条件判断等）</td>
                        <td>
                            <p>循环：<br>
                            <code>{cwpdapp{# for(var i=0; i&lt;d.list.length; i++) { }}<br>
                            &nbsp;&nbsp;&lt;li&gt;{cwpdapp{=d.list[i]}}&lt;/li&gt;<br>
                            {cwpdapp{# } }}</code></p>
                            <p>条件：<br>
                            <code>{cwpdapp{# if(d.show) { }}<br>
                            &nbsp;&nbsp;&lt;div&gt;显示内容&lt;/div&gt;<br>
                            {cwpdapp{# } }}</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>{cwpdapp{= ... }}</code></td>
                        <td>输出变量内容，会自动进行HTML转义（防止XSS攻击）</td>
                        <td>
                            <p>输出简单变量：<br>
                            <code>&lt;div&gt;姓名：{cwpdapp{=d.name}}&lt;/div&gt;</code></p>
                            <p>输出对象属性：<br>
                            <code>&lt;div&gt;年龄：{cwpdapp{=d.user.age}}&lt;/div&gt;</code></p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <!-- DOM操作方法 -->
    <section id="dom-methods">
        <h2 class="section-title">
            <span class="icon">🖌️</span>DOM操作方法
        </h2>
        
        <div class="overflow-x-auto mb-6">
            <table>
                <thead>
                    <tr>
                        <th>方法</th>
                        <th>功能</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>append(html)</code></td>
                        <td>向匹配元素内部的末尾添加HTML内容</td>
                        <td>
                            <p><code>$cq("#list").append('&lt;li&gt;新列表项&lt;/li&gt;');</code></p>
                            <p>批量添加：<br>
                            <code>$cq(".container").append('&lt;div class="item"&gt;项目1&lt;/div&gt;&lt;div class="item"&gt;项目2&lt;/div&gt;');</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>prepend(html)</code></td>
                        <td>向匹配元素内部的开头添加HTML内容</td>
                        <td>
                            <p><code>$cq("#article").prepend('&lt;h2&gt;文章标题&lt;/h2&gt;');</code></p>
                            <p>添加多个元素：<br>
                            <code>$cq("#nav").prepend('&lt;li&gt;首页&lt;/li&gt;&lt;li&gt;关于&lt;/li&gt;');</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>insertBefore(html)</code></td>
                        <td>在匹配元素的前面（同级位置）插入HTML内容</td>
                        <td>
                            <p><code>$cq("#btn").insertBefore('&lt;label for="btn"&gt;点击按钮：&lt;/label&gt;');</code></p>
                            <p>插入提示信息：<br>
                            <code>$cq(".form-group").insertBefore('&lt;div class="tip"&gt;请填写以下信息&lt;/div&gt;');</code></p>
                        </td>
                    </tr>
                    <tr>
                        <td><code>insertAfter(html)</code></td>
                        <td>在匹配元素的后面（同级位置）插入HTML内容</td>
                        <td>
                            <p><code>$cq("#username").insertAfter('&lt;span class="error"&gt;用户名格式错误&lt;/span&gt;');</code></p>
                            <p>插入辅助内容：<br>
                            <code>$cq(".price").insertAfter('&lt;span class="unit"&gt;元&lt;/span&gt;');</code></p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <!-- 链式调用 -->
    <section id="chain-call">
        <h2 class="section-title">
            <span class="icon">🔗</span>链式调用
        </h2>
        
        <div class="overflow-x-auto mb-6">
            <table>
                <thead>
                    <tr>
                        <th>方式</th>
                        <th>说明</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>DOM操作链式调用</td>
                        <td>所有DOM操作方法均返回实例本身，可连续调用多个方法</td>
                        <td>
                            <code>$cq("#box")<br>
                            &nbsp;&nbsp;.prepend('&lt;h3&gt;标题&lt;/h3&gt;')<br>
                            &nbsp;&nbsp;.append('&lt;p&gt;正文内容&lt;/p&gt;')<br>
                            &nbsp;&nbsp;.insertAfter('&lt;div class="footer"&gt;底部&lt;/div&gt;');</code>
                        </td>
                    </tr>
                    <tr>
                        <td>渲染+DOM操作结合</td>
                        <td>渲染结果可直接结合DOM操作方法使用</td>
                        <td>
                            <code>$cq("#tpl")<br>
                            &nbsp;&nbsp;.未来之窗_通用技术_模板渲染(data)<br>
                            &nbsp;&nbsp;.appendTo("#container");</code>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>
</body>
</html>
